<template>
  <div class="studentUser">
    <div class="studentUser-header">
      <span>个人中心</span>
    </div>

    <div class="studentUser-main">
       <el-form
          label-width="100px"
          label-position="left"
          :model="mentorUserStore.mUserData"
          class="studentUserForm"
          >
          <el-form-item label="头像">
            <img src="../../assets/image/mentorUser.webp" alt="" width="100px">
          </el-form-item>
          <el-form-item label="姓名" >
            <el-input v-model="mentorUserStore.mUserData.name" disabled/>
          </el-form-item>
          <el-form-item label="工号">
            <el-input v-model="mentorUserStore.mUserData.id" disabled/>
          </el-form-item>
          <el-form-item label="学院">
            <el-input v-model="mentorUserStore.mUserData.school" disabled/>
          </el-form-item>
          <el-form-item label="密码">
            <span @click="showDialog=!showDialog" style="color: #165dff;">修改</span>
          </el-form-item>
        </el-form>
    </div>
  </div>

<el-dialog v-model="showDialog" width="500">
  <template #header="{titleId}">
      <div style="height: 20px; border-left: 5px solid #165dff;padding-left: 8px;">
        <h4 :id="titleId" style="line-height: 20px;">修改密码</h4>
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
      </div>
    </template>
    <el-form :model="form">
      <el-form-item label="原密码" :label-width="100" label-position="left" required>
        <el-input v-model="form.oldPassword" autocomplete="off" type="password" placeholder="请输入原密码" show-password/>
      </el-form-item>
      <el-form-item label="新密码" :label-width="100" label-position="left" required>
        <el-input v-model="form.newPassword" autocomplete="off" type="password" placeholder="请输入新密码" show-password/>
      </el-form-item>
      <el-form-item label="确认新密码" :label-width="100" label-position="left" required>
        <el-input v-model="form.configNewPassword" autocomplete="off" type="password" placeholder="请输入新密码" show-password/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div style="display: flex;justify-content: space-evenly;">
        <el-button @click="showDialog = false" style="width: 120px;">返回</el-button>
        <el-button type="primary" @click="showDialog = false" style="width: 120px;">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import { reactive, ref,onBeforeMount } from 'vue'
import '../../views/userModifyPassword.vue'
import UserModifyPassword from '../../views/userModifyPassword.vue';
import { useMentorUser } from '@/stores/mentor/mUser';

const mentorUserStore = useMentorUser()

onBeforeMount(() => {
  mentorUserStore.mUserRequest()
})

let showDialog = ref(false)
// const formLabelAlign = reactive({
//   name: 'usernames',
//   region: '2024xxxx',
//   type: '计算机科学与工程学院',
// })

const form = reactive({
  oldPassword: '',
  newPassword: '',
  configNewPassword: '',
})
</script>

<style scoped>
.studentUser {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;

  .studentUser-header {
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    padding-left: 50px;
    border-top: 1px solid #c9c9ca;
    border-bottom: 1px solid #c9c9ca;
    background-color: #fff;
    span {
      font-size: 25px;
      height: 100%;
      line-height: 10vh;
    }
  }

  .studentUser-main {
    /* flex: 1; */
    margin: 40px 50px;
    background-color: #fff;
    .studentUserForm {
      overflow: auto;
      width: 420px;
      margin: auto;
      img {
        border-radius: 50px;
      }
      .el-form-item {
        margin: 30px;
      }
      :deep(.el-form-item__label) {
        font-size: 20px;
        color: #000;
      }
      :deep(.el-input__wrapper) {
        background-color: #f2f3f5ff;
        border: 0;
      }
    }
  }
}
</style>